<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '购物车',
  },
}
</route>

<script lang="ts" setup>
const productList = ref([
//   {
//     merchant: 'XXX店',
//     img: 'https://img.meituan.net/csc/792f73808d45c47b28c40de1548f11621228590.jpg',
//     name: 'xxx服饰',
//     amount: 2,
//     content: [
//       {
//         name: 'xxx服装',
//         amount: 2,
//         price: 80.00,
//       },
//       {
//         name: 'xxx道具',
//         amount: 4,
//         price: 90.00,
//       },
//     ],
//     status: '待付款',
//   },
//   {
//     merchant: 'XX餐厅',
//     img: 'https://img.meituan.net/csc/792f73808d45c47b28c40de1548f11621228590.jpg',
//     name: 'xx美食',
//     amount: 2,
//     content: [
//       {
//         name: '披萨',
//         amount: 1,
//         price: 28.00,
//       },
//     ],
//     status: '待使用',
//   },
])

function goLook() {
  uni.switchTab({
    url: '/pages/goods/index',
    fail: (err) => {
      console.error('跳转失败', err)
    },
  })
}

function goPay() {
  uni.navigateTo({
    url: '/pages/order/orderSettlement',
    fail: (err) => {
      console.error('跳转失败', err)
    },
  })
}

const sum = 0
</script>

<template>
  <!-- if购物车无商品 -->
  <view v-if="productList.length === 0" class="mt-50 flex flex-col items-center justify-center">
    <DefaultPlaceholder image-src="https://m.360buyimg.com/i/jfs/t1/315643/22/15475/6503/686caabfFe0b59b3b/031793a0c822ea0f.jpg" text="购物车空空如也" />
    <view
      class="h-65rpx w-46% flex items-center justify-center rounded-3xl bg-[linear-gradient(to_right,#e0cebd,#bfa189)] from-[#f8f0eb] to-[#e7d3c3] text-white"
      @click="goLook"
    >
      去逛逛
    </view>
  </view>
  <!-- 底部支付栏 -->
  <view class="h-18" />
  <view
    class="fixed bottom-0 z-6 box-border h-20 w-100% flex items-center justify-between rounded-tl-2xl rounded-tr-2xl bg-white p-3"
    style="box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);"
  >
    <view class="w-65% flex items-center justify-between">
      <view>全选</view>
      <view>总计 ￥{{ sum }}</view>
    </view>
    <view
      class="h-70% w-30% flex items-center justify-center rounded-lg bg-[linear-gradient(to_right,#e0cebd,#bfa189)] from-[#f8f0eb] to-[#e7d3c3] text-white"
      @click="goPay"
    >
      去结算
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
